<template>
  <div class="app-container">
    <el-card :bordered="false">
      <el-form  ref="formValidate" :rules="ruleValidate" :model="formValidate" label-width="130px" >
        <el-row :gutter="24">
          <el-col v-bind="grid2">
            <el-form-item label="经销商名称：" prop="distributor_name">
              <el-input v-model="formValidate.distributor_name" placeholder="请输入经商名称"  />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="联系人：" prop="link_man">
              <el-input v-model="formValidate.link_man" placeholder="请输入联系人"  />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="业务担当：" prop="header">
              <el-input v-model="formValidate.header" placeholder="请输入业务担当"  />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="联系电话：" prop="link_tel">
              <el-input v-model="formValidate.link_tel"  placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="微信：" prop="weixin">
              <el-input v-model="formValidate.weixin"  placeholder="请输入微信" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="QQ：" prop="qq">
              <el-input v-model="formValidate.qq"  placeholder="请输入qq" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="地址：" prop="address">
              <el-input v-model="formValidate.address"  placeholder="请输入地址" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="仓库地址：" prop="ware_house">
              <el-input v-model="formValidate.ware_house"  placeholder="请输入仓库地址" />
            </el-form-item>
          </el-col>

<!--          <el-col v-bind="grid2">
            <el-form-item label="发票类型：" prop="invoice_type">
              <el-select v-model="formValidate.invoice_type" style="width: 178px" placeholder="请选择发票类型">
                <el-option
                  v-for="(item, index) in invoiceTypes"
                  :key="item.name + index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>-->

          <el-col v-bind="grid2">
            <el-form-item label="发票类型">
              <el-radio-group v-model="formValidate.invoice_type" style="width: 178px">
                <el-radio label="0">不开票</el-radio>
                <el-radio label="1">开票</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="发票抬头：" prop="invoice_title">
              <el-input v-model="formValidate.invoice_title"  placeholder="请输入发票抬头" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="税号：" prop="invoice_tax">
              <el-input v-model="formValidate.invoice_tax"  placeholder="请输入税号" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="发票地址：" prop="invoice_address">
              <el-input v-model="formValidate.invoice_address"  placeholder="请输入发票地址" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="发票电话：" prop="invoice_tel">
              <el-input v-model="formValidate.invoice_tel"  placeholder="请输入发票电话" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="开户行：" prop="invoice_bank">
              <el-input v-model="formValidate.invoice_bank"  placeholder="请输入开户行" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="开户行行号：" prop="invoice_bank_no">
              <el-input v-model="formValidate.invoice_bank_no"  placeholder="请输入开户行行号" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="渠道：" prop="channel">
              <el-input v-model="formValidate.channel"  placeholder="请输入渠道" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="终端数量：" prop="terminal_quantity">
              <el-input v-model="formValidate.terminal_quantity"  placeholder="请输入终端数量" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="合作状态：" prop="cooperate">
              <el-select v-model="formValidate.cooperate" style="width: 178px" placeholder="请选择合作状态">
                <el-option
                  v-for="(item, index) in cooperates"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="合作日期" prop="cooperate_date">
              <el-date-picker
                @change="getCooperateDate"
                style="width: 370px;"
                v-model="formValidate.cooperateDateArr"
                placeholder="合作日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="是否返点">
              <el-radio-group v-model="formValidate.is_rebate" style="width: 178px">
                <el-radio label="0">不返点</el-radio>
                <el-radio label="1">返点</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="月返比例：" prop="month_rebate_ratio">
              <el-input v-model="formValidate.month_rebate_ratio"  placeholder="请输入月返比例" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="年返比例：" prop="year_rebate_ratio">
              <el-input v-model="formValidate.year_rebate_ratio"  placeholder="请输入年返比例" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="结算方式：" prop="settle_method">
              <el-select v-model="formValidate.settle_method" style="width: 178px" placeholder="请选择结算方式">
                <el-option
                  v-for="(item, index) in settleMethods"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="入账时间" prop="fee_income_date">
              <el-date-picker
                @change="getFeeIncomeDate"
                style="width: 370px;"
                v-model="formValidate.feeIncomeDateArr"
                placeholder="入账时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="最迟结款时间" prop="last_fee_income_date">
              <el-date-picker
                @change="getLastFeeIncomeDate"
                style="width: 370px;"
                v-model="formValidate.lastFeeIncomeDateArr"
                placeholder="最迟结款时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="保证金（分）：" prop="cash_deposit">
              <el-input v-model="formValidate.cash_deposit"  placeholder="请输入保证金" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="收件人：" prop="consignee">
              <el-input v-model="formValidate.consignee"  placeholder="请输入收件人" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="收件人电话：" prop="consignee_tel">
              <el-input v-model="formValidate.consignee_tel"  placeholder="请输入收件人电话" />
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="对账日期" prop="verify_date">
              <el-date-picker
                @change="getVerifyDate"
                style="width: 370px;"
                v-model="formValidate.verifyDateArr"
                placeholder="对账日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="结算日期" prop="close_date">
              <el-date-picker
                @change="getCloseDate"
                style="width: 370px;"
                v-model="formValidate.closeDateArr"
                placeholder="结算日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="是否单独报价">
              <el-radio-group v-model="formValidate.custom_price" style="width: 240px">
                <el-radio label="0">不单独报价</el-radio>
                <el-radio label="1">单独报价</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col v-bind="grid2">
            <el-form-item label="发货要求：" prop="delivery_remark">
              <el-input v-model="formValidate.delivery_remark"  placeholder="请输入发货要求" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { add } from '@/api/yxDistributor'
import editor from '../components/Editor'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import MaterialList from '@/components/material'
import singlePic from '@/components/singlematerial'
import UeditorWrap from 'vue-ueditor-wrap';
import { parseTime } from '@/utils/index'

export default {
  components: { editor, Treeselect, MaterialList, UeditorWrap, singlePic },
  data() {
    return {
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      isBtn: false,
      formValidate: {
        imageArr:[],
        sliderImageArr: [],
        store_name: '',
        name:"",
        cate_id: '',
        product_sort_id:'',
        keyword: '',
        unit_name: '',
        store_info: '',
        describe:'',
        image: '',
        photo:'',
        slider_image: [],
        description: '',
        ficti: 0,
        give_integral: 0,
        sort: 0,
        is_show: 1,
        is_hot: 0,
        is_benefit: 0,
        is_best: 0,
        is_new: 0,
        is_good: 0,
        is_postage: 0,
        is_sub: 0,
        is_integral: 0,
        id: 0,
        spec_type: 0,
        temp_id: '',
        attrs: [],
        items: [
          {
            pic: '',
            price: 0,
            cost: 0,
            ot_price: 0,
            stock: 0,
            bar_code: '',
            integral:0
          }
        ],
        header: [],
        selectRule: ''
      },
      treeSelect: [],
      optionsMetaShow: [],
      tableIndex: 0,
      attrs: [],
      cooperates: [
        { key: 1, value: '未合作' },
        { key: 2, value: '已终止' },
        { key: 4, value: '战略合作' },
        { key: 8, value: '深度合作' },
        { key: 16, value: '普通合作' }
      ],
      settleMethods: [
        { key: 1, value: '现款' },
        { key: 2, value: '月结/期结' },
        { key: 4, value: '代销月结' },
        { key: 8, value: '授信月结' }
      ]
    }
  },

  methods: {
    dataFilter(val){
      this.value=val
      if(val){
        this.optionsMetaShow=this.treeSelect.filter((item=>{
          if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        }))
      }else{
        this.optionsMetaShow=this.treeSelect
      }
    },
    confirm () {
      let that = this;
      that.createBnt = true;
      if (that.formValidate.selectRule.trim().length <= 0) {
        return this.$message({
          message:'请选择属性',
          type: 'error'
        });
      }
      that.ruleList.forEach(function (item, index) {
        if (item.ruleName === that.formValidate.selectRule) {
          that.attrs = item.ruleValue;
        }
      });
    },
    // 删除表格中的属性
    delAttrTable (index) {
      this.manyFormValidate.splice(index, 1);
    },

    // 添加按钮
    addBtn () {
      this.clearAttr();
      this.createBnt = false;
      this.showIput = true;
    },
    // 立即生成
    generate () {
      isFormatAttr(this.formValidate.id, { attrs: this.attrs }).then(res => {
        this.manyFormValidate = res.value;
        let headerdel = {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 220
        };
        res.header.push(headerdel);
        this.formValidate.header = res.header;
        //this.formValidate.attrs = res.attr;
        let header = res.header;
        header.pop();
        if (!this.$route.params.id && this.formValidate.spec_type === 1) {
          this.manyFormValidate.map((item) => {
            item.pic = this.formValidate.image
          });
          this.oneFormBatch[0].pic = this.formValidate.image;
        }
      }).catch(res => {
        // this.$message({
        //   message:res.msg,
        //   type: 'error'
        // });
      })
    },
    // 取消
    offAttrName () {
      this.showIput = false;
      this.createBnt = true;
    },
    clearAttr () {
      this.formDynamic.attrsName = '';
      this.formDynamic.attrsVal = '';
    },
    // 删除规格
    handleRemoveRole (index) {
      this.attrs.splice(index, 1);
      this.manyFormValidate.splice(index, 1);
    },
    // 删除属性
    handleRemove2 (item, index) {
      item.splice(index, 1);
    },

    // 添加属性
    createAttr (num, idx) {
      if (num) {
        this.attrs[idx].detail.push(num);
        var hash = {};
        this.attrs[idx].detail = this.attrs[idx].detail.reduce(function (item, next) {
          hash[next] ? '' : hash[next] = true && item.push(next);
          return item
        }, [])
      } else {
        this.$message.warning('请添加属性！');
      }
    },


    // 提交
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if(this.formValidate.spec_type ===0 ){
            this.formValidate.attrs = this.oneFormValidate;
            this.formValidate.header = [];
            this.formValidate.items = [];
          }else{
            this.formValidate.items = this.attrs;
            this.formValidate.attrs = this.manyFormValidate;
          }
          if(this.formValidate.spec_type === 1 && this.manyFormValidate.length===0){
            return this.$message.warning('请点击生成规格！');
          }
          add(this.formValidate).then(async res => {
            this.$message({
              message:'操作成功',
              type: 'success'
            });
            setTimeout(() => {
              this.$router.push({ path: '/shop/goods' });
            }, 500);
          }).catch(res => {

          })
        } else {
          if(!this.formValidate.name || !this.formValidate.photo ){
            this.$message.warning("请填写完整商品信息！");
          }
        }
      })
    },

    // 表单验证
    validate (prop, status, error) {
      if (status === false) {
        this.$message.warning(error);
      }
    },
    addCustomDialog () {
      window.UE.registerUI('yshop', function (editor, uiName) {
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: '/yshop/materia/index',
          editor: editor,
          name: uiName,
          title: '上传图片',
          cssRules: 'width:1200px;height:500px;padding:20px;'
        });
        this.dialog = dialog;

        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function () {
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      }, 37);
    },


    cancel() {
      this.resetForm()
    },
    getCooperateDate() {
      this.formValidate.cooperateDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    },
    getFeeIncomeDate(){
      this.formValidate.feeIncomeDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    },
    getLastFeeIncomeDate(){
      this.formValidate.lastFeeIncomeDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    },
    getVerifyDate(){
      this.formValidate.verifyDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    },
    getCloseDate(){
      this.formValidate.closeDateArr = parseTime(new Date(),'{y}-{m}-{d}')
    }
  }
}
</script>

<style scoped lang="stylus">
  .submission
    margin-left 10px;
  .color-list .tip{
    color: #c9c9c9;
  }
  .color-list .color-item{
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color:#fff;
    margin-right :10px;
  }
  .color-list .color-item.blue{
    background-color: #1E9FFF;
  }
  .color-list .color-item.yellow{
    background-color: rgb(254, 185, 0);
  }
  .color-list .color-item.green{
    background-color: #009688;
  }
  .columnsBox
    margin-right 10px
  .priceBox
    width 100%
  .rulesBox
    display flex
    flex-wrap: wrap;
  .curs
    cursor pointer
</style>
